<template>
  <div class="perfect-one">
    <div class="per-header">
      <p class="per-remind">
        <i class="el-icon-message-solid"></i>点击修改按钮可编辑个人信息
      </p>
    </div>
    <div class="per-content">
      <div class="per-tab">
        <span>当前位置：</span>
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item to="/">首页</el-breadcrumb-item>
          <el-breadcrumb-item>个人信息</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <div class="per-layer">
        <div class="per-input">
          <el-form ref="form" :model="form" label-width="80px" :rules="rules" :ref="form" :disabled="chengedis">
            <el-form-item label="姓名/公司">
              <el-input v-model="form.applicantName"></el-input>
            </el-form-item>
            <el-form-item label="联系方式">
              <el-input v-model="form.phoneNum"></el-input>
            </el-form-item>
            <el-form-item label="电子邮件">
              <el-input v-model="form.email"></el-input>
            </el-form-item>
            <el-form-item label="证件号码">
              <el-input v-model="form.codeNum"></el-input>
            </el-form-item>
            <el-form-item label="邮政编码" prop="postCode">
              <el-input v-model="form.postCode"></el-input>
            </el-form-item>
            <el-form-item label="地址">
              <el-input v-model="form.address"></el-input>
            </el-form-item>
            <el-form-item label="密保问题">
              <el-input v-model="form.pwdQue"></el-input>
            </el-form-item>
            <el-form-item label="密保答案">
              <el-input v-model="form.pwdAns"></el-input>
            </el-form-item>
          </el-form>
        </div>
        <el-button v-show="chengedis" class="item-button" type="primary" @click="amend">点击修改</el-button>
        <el-button v-show="!chengedis" class="item-button" type="primary" @click="complete(form)">完成修改</el-button>
      </div>
    </div>
  </div>
</template>

<script>
//import CookieJs from "@/utils/Cookie.js";
export default {
  data() {
    return {
      form: {
        applicantName: "",
        phoneNum: "",
        email: "",
        codeNum: "",
        postCode: "",
        address: "",
        pwdQue: "",
        pwdAns: "",
      },
      chengedis: true,
      rules:{
        postCode:[
          // { required: true, message: "邮编不能为空", trigger: "change" },
          {
            pattern: /^[0-9]{6}$/,
            message: "请填写正确的邮编",
            trigger: "blur"
          },
        ]
      }
    };
  },
  methods: {
    showinfor() {
      this.$http
        .get("/trademark/proMember/findById", {
          params: {
            id: this.$store.state.userId,
          },
        })
        .then((res) => {
            if (res.data.code !== 200) return;
          this.form = res.data.data;
        });
    },
    
    amend() {
      this.chengedis = false;
    },
    //  submit (form) {
    //     this.$refs[form].validate(valid => {
    //       if (valid) {
    //            // do something
    //       }
    //     })
 
    //   }
    //完成修改
    complete(form) {
      
      this.$refs[form].validate(valid => {
        
        if (valid) {
          this.chengedis = true;
          this.$http
            .post("/trademark/proMember/update", {
              id: this.$store.state.userId,
              applicantName: this.form.applicantName,
              phoneNum: this.form.phoneNum,
              email: this.form.email,
              codeNum: this.form.codeNum,
              postCode: this.form.postCode,
              address: this.form.address,
              pwdQue: this.form.pwdQue,
              pwdAns: this.form.pwdAns,
            })
            .then((res) => {
                if (res.data.code !== 200) return ;
              this.$message({
                message: "修改成功",
                type: "success",
              });
            });
        }else{
          alert("修改信息有误")
          return
        }
      })
      
    },
  },
  mounted() {
    this.showinfor();
  },
};
</script>

<style lang="less" scoped>
.perfect-one {
  background-color: #f7f7f7;
  height: 100%;
  .per-header {
    width: 100%;
    height: 50px;
    color: #ff6633;
    background-color: #ffefea;
    line-height: 50px;
    border-radius: 8px;
    margin-bottom: 22px;
    .el-icon-message-solid {
      font-size: 20px;
      padding: 0 5px 0 20px;
    }
  }
  .per-content {
    background-color: #fff;
    height: 91%;
    .per-tab {
      display: flex;
      align-items: center;
      font-size: 14px;
      color: #666666;
      padding: 28px 0 28px 20px;
      border-bottom: 1px solid #eee;
      /deep/.el-breadcrumb__item{
        span:hover{
          color: #409EFF;
        }
      }
      /deep/.el-breadcrumb__item:last-child{
        .el-breadcrumb__inner{
          font-weight: 700;
          cursor: default;
          &:hover{
            color: #666666;
          }
        }
      }
      /deep/.el-icon-arrow-right,
      /deep/.el-breadcrumb__inner {
        font-weight: normal;
        font-size: 14px;
        line-height: normal;
        color: #666666;
      }
    }
    .per-layer {
      width: 600px;
      margin: 39px 0 0 310px;
      padding-bottom: 20px;
      .per-input {
        width: 450px;
      }
      .per-steps {
        width: 600px;
        margin-bottom: 40px;
      }
      .question {
        width: 100%;
      }
      .item-button {
        margin: 60px 0 0 200px;
      }
    }
  }
}
</style>
